<template>
  <div class="details" :class="{active:isHeight}">
    <ul>
      <li v-for="(item,index) in dataList" :key="index"><router-link :to='item.src' :class="{active:$store.state.active==index}" v-html="item.name"></router-link></li>
    </ul>
    <div>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import store from '@/vuex/store.js'
export default {
  data() {
    return {
      dataList: [],//跳转路由的地址
      isHeight: false,//内容区高度
    };
  },
  store,
  mounted() {
    var waitnum = sessionStorage.getItem('headernum')
    //正在处理中的项目侧边栏
    if(!waitnum){
      waitnum = 0
    }
    if(waitnum == 0){
      this.dataList = [{name:'项目详情',src:'/process/details/detail'},{name:'用户资料',src:'/process/details/user'}]
    }
    //待分配的项目侧边栏
    else if(waitnum == 1){
      this.dataList = [{name:'项目详情',src:'/wait/details'},{name:'用户资料',src:'/wait/user'},{name:'项目分配',src:'/wait/Distribution'}]
      this.isHeight = true
    }
    //完成的项目侧边栏
    else if(waitnum == 2){
      this.dataList = [{name:'项目详情',src:'/complete/details'},{name:'用户资料',src:'/complete/user'},{name:'结果文件',src:'/complete/result'},{name:'联&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;系',src:'/complete/contact'}]
      this.isHeight = true
    }
    //代付款的订单侧边栏
    else if(waitnum == 3){
      this.dataList = [{name:'项目详情',src:'/paying/details'},{name:'用户资料',src:'/paying/user'},{name:'联系客户',src:'/paying/contact'}]
      this.isHeight = true
    }
    //数据分析咨询侧边栏
    else if(waitnum == 4){
      this.dataList = [{name:'项目详情',src:'/analysis/details'},{name:'用户资料',src:'/analysis/user'},{name:'订单报价',src:'/analysis/contact'},{name:'沟&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;通',src:'/analysis/communication'}]
      this.isHeight = true
    }
    //设置侧边栏
    else if(waitnum == 5){
      this.dataList = [{name:'职位申请',src:'/setting/position'},{name:'我的团队',src:'/setting/team'},{name:'团队管理',src:'/setting/manage'}]
      this.isHeight = true
    }
  },
  methods: {
    
  }
};
</script>

<style lang='scss' scoped>
.details {
  width: calc(100% - 80px);
  height: calc(100% - 66px);
  margin: 30px auto 0;
  display: flex;
  &.active{
    height: 100%;
  }
  ul {
    width: 130px;
    li a {
      width: 130px;
      height: 32px;
      text-decoration: none;
      display: block;
      text-align: center;
      line-height: 32px;
      font-size: 14px;
      color: #333;
      margin-bottom: 22px;
    }
    li a.active {
      background: rgba(230, 230, 230, 1);
      border-radius: 5px;
    }
  }
  div{
    width: 100%;
    height: 100%;
  }
}
</style>
